import { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import { actionCreator } from './store';
import { actionCreator as loginActionCreator } from '../../pages/login/store';
import './index.scss';

class Header extends Component {
    getSearchInfo() {
        const { focused, mouseIn, mouseEnter, ouseLeave, changePage, list, page, totalPage, searchValue } = this.props;
        const newList = list.toJS(); // 把immutable对象转换成普通的js对象
        const pageList = [];

        for (let i = (page - 1) * 10; i < page * 10; i++) {
            if (newList[i]) {
                pageList.push(
                    <li className="item" key={newList[i]} onClick={() => searchValue(newList[i])}>
                        {newList[i]}
                    </li>
                );
            }
        }

        if (focused || mouseIn) {
            return (
                <div className="searchInfo" onMouseEnter={mouseEnter} onMouseLeave={ouseLeave}>
                    <span className="title">热门搜索</span>
                    <span className="switch fr" onClick={() => changePage(page, totalPage, this)}>
                        <i className="iconfont icon-change" ref="iconChange"></i>
                        换一批
                    </span>
                    <ul>
                        {/* {list.map((item, index) => {
                            return (
                                <li className="item" key={index}>
                                    {item}
                                </li>
                            );
                        })} */}
                        {pageList}
                    </ul>
                </div>
            );
        } else {
            return null;
        }
    }
    render() {
        const { focused, searchFocus, searchBlur, onChange, searchVal, list, isLogin, logout } = this.props;
        return (
            <div className="HeaderWrapper">
                <Link className="Logo" to="/"></Link>
                <div className="nav clearfix">
                    <div className="nav-item fl active">首页</div>
                    <div className="nav-item fl">下载</div>
                    <div className="nav-item fr" style={{ 'cursor': 'pointer' }}>
                        {isLogin ? <div onClick={logout}>退出</div> : <Link to="/login">登录</Link>}
                    </div>
                    <div className="nav-item fr">
                        <i className="iconfont icon-Aa"></i>
                    </div>
                    <CSSTransition timeout={300} in={focused} classNames="myslide">
                        <div className={focused ? 'search focused' : 'search'}>
                            <input className="nav-search" placeholder="搜索" value={searchVal} onFocus={() => searchFocus(list)} onBlur={searchBlur} onChange={onChange} />
                            <i className="iconfont icon-search"></i>
                            {this.getSearchInfo()}
                        </div>
                    </CSSTransition>
                </div>
                <div className="addition clearfix">
                    <div className="button fl">注册</div>
                    <div className="button fl active">
                        <i className="iconfont icon-write"></i>写文章
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        // focused: state.get('header').get('focused'),
        focused: state.getIn(['header', 'focused']),
        mouseIn: state.getIn(['header', 'mouseIn']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        searchVal: state.getIn(['header', 'searchVal']),
        isLogin: state.getIn(['login', 'isLogin']),
    };
};

const mapDispatchToProps = disptch => {
    let i = 0;
    return {
        searchFocus(list) {
            disptch(actionCreator.searchFocusAction(true));
            if (!list.size) {
                disptch(actionCreator.getListAction());
            }
        },
        searchBlur() {
            disptch(actionCreator.searchFocusAction(false));
        },
        mouseEnter() {
            disptch(actionCreator.mouseEnterAction(true));
        },
        ouseLeave() {
            disptch(actionCreator.mouseEnterAction(false));
        },
        changePage(page, totalPage, that) {
            i++;
            if (page < totalPage) {
                disptch(actionCreator.changePageAction(page + 1));
            } else {
                disptch(actionCreator.changePageAction(1));
            }
            const dom = ReactDOM.findDOMNode(that.refs.iconChange); // 获取dom
            dom.style.transform = 'rotate(' + 180 * i + 'deg)';
        },
        searchValue(value) {
            disptch(actionCreator.searchValueAction(value));
        },
        onChange(e) {
            disptch(actionCreator.searchValueAction(e.target.value));
        },
        logout() {
            disptch(loginActionCreator.loginAction(false));
        },
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Header);
